$modal-content-height: 500px;
$modal-content-max-height: 70vh;
$max-modal-width: 1000px;
$min-modal-width: 670px;

.autosave-feature-modal {
  .ReactModal {
    &__Overlay--after-open {
      z-index: 100 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.45) !important;
    }

    &__Content--after-open {
      position: relative !important;
      min-width: $min-modal-width;
      width: 70vw;
      max-width: $max-modal-width;
      display: flex;
      flex-direction: column;
      padding: 24px !important;
      inset: 0 !important;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 4px;
    }
  }
  .autosave-feature-modal-wrapper {
    display: grid;
    grid-template-rows: 1fr 8fr 1fr;
    grid-row-gap: 18px;

    .header {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      grid-row: 1;

      .title {
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
        color: var(--blue-800);
      }

      svg {
        width: 32px;
        height: 32px;
      }
    }

    .content {
      color: var(--gray-600);
      font-size: 14px;
      font-weight: 400;
      display: flex;
      flex-direction: column;
      gap: 8px;

      p {
        margin-bottom: 4px;
      }

      .bold {
        font-weight: 700;
      }
    }
  }

}
